<template>
	<!-- 销售漏斗 -->
	<view class="page">
		<!-- search -->
		<view class=""
			style="display: flex;flex-direction: row;align-items: center;padding: 12px;background-color: #FFFFFF;justify-content: space-between;">
			<view class="" @click="popBack()">
				<text class="iconfont icon-arrow-left" style="font-size: 16px;font-weight: bold;"></text>
				<text style="font-size: 16px;">销售漏斗</text>
			</view>
			<view
				style="
				display: flex;
				flex-direction: row;
				align-items: center;
				border-style: solid;border-width: 1px;border-color: #999999;padding:5px 12px;background-color: #FFFFFF;border-radius: 4px;">
				<text style="font-size: 14px;color: #333333;display: block;">近一个月</text>
				<text style="font-size: 20px;color: #333333;display: block;margin-left: 12px;"
					class="iconfont icon-rili"></text>
			</view>
		</view>

		<!-- line -->
		<view style="height: 1px;background-color: #F1F1F1;" />


		<view style="flex: 1;background-color: #FFFFFF;overflow-y: auto;">
			<!-- echarts -->
			<view style="height: 422px;">
				<iframe src="https://echarts.apache.org/examples/zh/editor.html?c=funnel-customize" frameborder="0"
					style="height: 100%;width: 100%;"></iframe>
			</view>
			<!-- list -->
			<!-- header -->
			<view
				style="display: flex;background-color: #f5f5f5;height: 45px;justify-content: center;align-items: center;">
				<text style="display: block;text-align: center;font-size: 14px;flex: 1;">阶段</text>
				<text style="display: block;text-align: center;font-size: 14px;flex: 1;">人数</text>
				<text style="display: block;text-align: center;font-size: 14px;flex: 1;">转化率</text>
			</view>
			<!-- cell -->
			<view style="display: flex;flex-direction: column;" v-for="idx in 8">
				<view
					style="display: flex;background-color: #FFFFFF;height: 45px;justify-content: center;align-items: center;flex: 1;">
					<text style="display: block;text-align: center;font-size: 14px;flex: 1;">客户</text>
					<text style="display: block;text-align: center;font-size: 14px;flex: 1;">2500</text>
					<text style="display: block;text-align: center;font-size: 14px;flex: 1;">75%</text>
				</view>
				<view style="height: 1px;background-color: #F1F1F1;" />
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			popBack() {
				uni.navigateBack({

				})
			}
		}
	}
</script>

<style scoped>
	.page {
		background-color: #f5f5f5;
		flex: 1;
		display: flex;
		flex-direction: column;
	}
</style>
